<!DOCTYPE html>
<html>

<head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
    <title>Luckysheet</title>

    <link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='./plugins/plugins.css' />
    <link rel='stylesheet' href='./css/luckysheet.css' />
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
    <script src="./plugins/js/plugin.js"></script>

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>


</head>

<body>
    <div class="header">
        <button>创建模板</button>
        <button>保存模板</button>
        <button>预览模板</button>
    </div>
    <div class="content">
        <div class="left-sidebar">
            <div style="border: 1px solid black;padding:5px;">
                <span>模板标识</span> <input /><br>
                <span>模板名称</span> <input />
                <div style="border: 1px solid red;padding: 5px;margin-top: 5px;">
                    <span>参数1</span> <input /><br>
                    <span>参数2</span> <input /><br>
                </div>
            </div>
            <div style="border: 1px solid black;padding:5px;margin-top: 10px;">
                <div>数据源1</div>
                <div>数据源2</div>
                <div style="border: 1px solid black;padding:5px;">
                    <span>数据源名称</span> <input /><br>
                    <span>数据源类型</span> <input /><br>
                    <span>数据源地址</span> <input /><br>
                    <div style="border: 1px solid red;padding: 5px;margin-top: 5px;">
                        <span>参数1</span> <input /><br>
                        <span>参数2</span> <input /><br>
                    </div>
                </div>

                <div style="border: 1px solid red;padding: 5px;margin-top: 5px;">
                    <button>预览</button><br>
                    <select name="fruits" id="fruits">
                        <option value="apple">主键</option>
                        <option value="banana">名称</option>
                    </select><span>列数据</span>
                    <div>表格数据</div>
                </div>
            </div>
        </div>
        <div class="right-sidebar" id="luckysheet"
            style="margin:0px;padding:0px;width:100%;height:700px;left: 0px;top: 0px;">
        </div>
    </div>
    <div id="print_html" style="border:1px solid red;padding: 5px;"></div>

    <script>

        window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            // showinfobar: false,
            // showtoolbar: false,
            // showsheetbar: false,
            fullscreenmode: false,
            // sheetFormulaBar: false,
            // allowEdit: false,
            // plugins: [{ name: 'chart' }],
            column: 10,
            row: 100
        });
        console.log("options", window.luckysheet.getOptions())
        function getSheet() {
            console.log("表格参数", window.luckysheet.getAllSheets())
        }
        function hide() {
            window.luckysheet.hideGridLines();
        }
        function show() {
            window.luckysheet.showGridLines();
        }
        function print() {
            console.log("start print")
            window.luckysheet.getScreenshotNew(function (res) {
                const $img = `<img src=${res} style="max-width: 100%;" />`
                document.querySelector('#print_html').innerHTML = $img
            })
        }
        function setRangeFormat() {
            window.luckysheet.setRangeFormat("ro", true)
        }
        function exportExcel() {
            let ll = window.luckysheet.exportExcel();
            console.log(ll)
        }
        // 获取文件输入元素
        const uploadBtn = document.getElementById('uploadBtn');
        // 监听 change 事件
        uploadBtn.addEventListener('change', function (event) {
            loadExcel(event)
        });

        function loadExcel(evt) {
            window.luckysheet.loadExcel(evt)
        }
    </script>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            padding: 20px;
        }

        .content {
            display: flex;
            flex: 1;
        }

        .left-sidebar,
        .right-sidebar {
            background-color: #f1f1f1;
            padding: 20px;
            width: 300px;
            /* 可以根据需要调整宽度 */
        }

        .left-sidebar {
            order: 1;
        }

        .right-sidebar {
            order: 3;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            order: 2;
            background-color: #fff;
        }
    </style>
</body>

</html>